<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>Gooey Templates : Tables</title>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<meta http-equiv="Expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
		<meta http-equiv="Pragma" content="no-cache" />
		<link rel="stylesheet" href="css/reset-fonts.css" type="text/css" media="screen, projection" />
		<link rel="stylesheet" href="css/gt-styles.css" type="text/css" media="screen, projection" />
	</head>
	<body>
		<!-- head -->
		<div class="gt-hd clearfix">
			<!-- leaf watermark -->
			<div class="gt-leaf-watermark clearfix">
			
			<!-- head top -->
			<div class="gt-hd-top clearfix">
			
				<div class="gt-fixed-wrap clearfix">
			
				<!-- logo -->
				<div class="gt-logo">
					eco style app <img class="gt-leaf" src="images/gt/leaf-logo-icon.png" alt="leaf-logo-icon" width="49" height="44"/>
				</div>
				<!-- / logo -->
				
				<!-- utility box -->
				<div class="gt-util-box">
					<div class="gt-util-box-inner">
						<p>welcome <strong>sarah</strong> <span class="gt-util-separator">|</span> <a href="">logout</a></p>
					</div>
				</div>
				<!-- / utility box -->
				
				</div>
			
			</div><!-- /head top -->
			
			<!-- navbar -->
			<div class="gt-navbar clearfix">
				
				<div class="gt-fixed-wrap clearfix">
				
				<!-- navigation -->
				<div class="gt-nav">
					<ul>
						<li><a href="index.html">Home</a></li>
						<li><a href="base.html">Base HTML</a></li>
						<li><a class="gt-active" href="tables.html">Tables</a></li>
						<li><a href="forms.html">Forms</a></li>
						<li><a href="text-styles.html">Text Styles</a></li>
						<li><a href="buttons.html">Buttons</a></li>
						<li><a href="login.html">Login</a></li>
					</ul>
				</div><!-- / navigation -->
				
				<!-- search -->
				<div class="gt-search"><div class="gt-search-inner">
					<input type="text" class="gt-search-text" value="Search" onfocus="javascript:if(this.value=='Search')this.value='';" onblur="javascript:if(this.value=='')this.value='Search';" />
				</div></div>
				
				</div>
				
			</div><!-- /navbar -->			
		</div><!-- /leaf watermark -->
		</div>
		<!-- / head -->
		
		<!-- body -->
		<div class="gt-bd gt-cols clearfix">
			
			<!-- main content -->
			<div class="gt-content">
				
				<!-- Sidebar Box -->
				<div class="gt-sidebar-box gt-sidebar-box-blue">
					<!-- search -->
					<div class="gt-search"><div class="gt-search-inner">
						<input type="text" class="gt-search-text" value="Search article archive" onfocus="javascript:if(this.value=='Search article archive')this.value='';" onblur="javascript:if(this.value=='')this.value='Search article archive';" />
					</div></div><!-- /search -->
				</div><!-- /Sidebar Box -->
				
				
				<!-- Article List Table -->
				<!-- This table can be used for listing things like articles, pages or blog entries -->
				<h2 class="gt-table-head">Current Articles</h2>
				<!-- Content Box -->
				<div class="gt-content-box">
				
				<!-- Table Controls -->
				<div class="gt-table-controls clearfix">
					<form action="" class="gt-table-picker">
						<select>
							<option>Choose Section...</option>
							<option>Blog</option>
							<option>Contact</option>
							<option>About</option>
						</select>
					</form>
					<p class="gt-table-pager"><a class="current" href="">1</a> | <a href="">2</a> | <a href="">3</a> <a href="">&raquo;</a></p>
				</div><!-- /Table Controls -->
				<table border="0" class="gt-table gt-user-table">
					<tbody>
						<tr>
							<td>
								<h4><a href="">Coders seek better UI solutions for their web apps</a></h4>
								<p>Here's a quick snippet of this article. It's the preview that shows the first couple lines.</p>
								
								<p class="gt-table-edit"><a href="">Edit</a></p>
							</td>
							<td>
								<!-- Categories Sub Table -->
								<table border="0" class="gt-table-categories">
									<tr>
										<th>Posted:</th>
										<td>Yesterday</td>
									</tr>
									<tr>
										<th>Category:</th>
										<td><a href="">Blog</a></td>
									</tr>
								</table>
							</td>
						</tr>
						<tr>
							<td>
								<h4><a href="">Coders seek better UI solutions for their web apps</a></h4>
								<p>Here's a quick snippet of this article. It's the preview that shows the first couple lines.</p>
								
								<p class="gt-table-edit"><a href="">Edit</a></p>
							</td>
							<td>
								<!-- Categories Sub Table -->
								<table border="0" class="gt-table-categories">
									<tr>
										<th>Posted:</th>
										<td>Yesterday</td>
									</tr>
									<tr>
										<th>Category:</th>
										<td><a href="">Blog</a></td>
									</tr>
								</table>
							</td>
						</tr>
						<tr>
							<td>
								<h4><a href="">Coders seek better UI solutions for their web apps</a></h4>
								<p>Here's a quick snippet of this article. It's the preview that shows the first couple lines.</p>
								
								<p class="gt-table-edit"><a href="">Edit</a></p>
							</td>
							<td>
								<!-- Categories Sub Table -->
								<table border="0" class="gt-table-categories">
									<tr>
										<th>Posted:</th>
										<td>Yesterday</td>
									</tr>
									<tr>
										<th>Category:</th>
										<td><a href="">Blog</a></td>
									</tr>
								</table>
							</td>
						</tr>
					</tbody>
				</table>
				</div><!-- /Content Box -->
				<div class="gt-table-buttons">
					<a href="" class="gt-btn-blue-large">Add New Article</a>
				</div>
				<!-- / Article Table List -->
				
				
				<!-- User List Table -->
				<!-- This table can be used for listing things like users -->
				<h2 class="gt-table-head">User List</h2>
				<!-- Content Box -->
				<div class="gt-content-box">
					<table border="0" class="gt-table gt-user-table">
						<tbody>
							<tr>
								<td class="gt-avatar"><img src="images/gt/avatar.gif" alt="avatar" width="53" height="53"/></td>
								<td>
									<h4><a href="">John Marker</a></h4>
									<p>My favorite color is green. I really like trees!</p>
									
									<p class="gt-table-edit"><a href="">Edit</a></p>
								</td>
								<td>
									<!-- Categories Sub Table -->
									<table border="0" class="gt-table-categories">
										<tr>
											<th>Networks:</th>
											<td><a href="">Green Lover</a>, <a href="">Eco Fan</a></td>
										</tr>
										<tr>
											<th>Friends:</th>
											<td><a href="">Susan</a>, <a href="">Fred</a></td>
										</tr>
									</table>
								</td>
							</tr>
							<tr>
								<td class="gt-avatar"><img src="images/gt/avatar.gif" alt="avatar" width="53" height="53"/></td>
								<td>
									<h4><a href="">Charlee Watts</a></h4>
									<p>My favorite color is green. I really like trees!</p>
									
									<p class="gt-table-edit"><a href="">Edit</a></p>
								</td>
								<td>
									<!-- Categories Sub Table -->
									<table border="0" class="gt-table-categories">
										<tr>
											<th>Networks:</th>
											<td><a href="">Green Lover</a>, <a href="">Flower Planters of Main</a></td>
										</tr>
										<tr>
											<th>Friends:</th>
											<td><a href="">Brandon A.</a>, <a href="">Maggy</a></td>
										</tr>
									</table>
								</td>
							</tr>
						</tbody>
					</table>
				</div><!-- /Content Box -->

				<div class="gt-table-buttons">
					<a href="" class="gt-btn-blue-small">Add</a>
				</div>
				
				<!-- / User List -->
				
				
				<!-- Comments Table -->
				<!-- This table can be used for listing things like user comments -->
				<h2 class="gt-table-head">Recent Comments</h2>
				
				<!-- content box -->
				<div class="gt-content-box">
				
				<table border="0" class="gt-table gt-user-table">
					<tbody>
						<tr>
							<td>
								<h4><a href="">Re: Rapid UI Solutions - I love it!</a></h4>
								<p>This is a snippet of the user comment. You can easily see if it's spam or real content.</p>
								<p class="gt-table-action-list"><a href=""><img src="images/famfamfam/icons/accept.png" alt="Approve" /> Approve</a> <span class="gt-separator">|</span> <a href=""><img src="images/famfamfam/icons/delete.png" alt="Spam" /> Mark as Spam</a></p>
							</td>
							<td>
								<!-- Categories Sub Table -->
								<table border="0" class="gt-table-categories">
									<tr>
										<th>Posted by:</th>
										<td>greenman17</td>
									</tr>
									<tr>
										<th>Date:</th>
										<td>2 Days Ago</td>
									</tr>
									<tr>
										<th>Status:</th>
										<td>Pending Approval</td>
									</tr>
								</table>
							</td>
						</tr>
						<tr>
							<td>
								<h4><a href="">Re: Rapid UI Solutions - I love it!</a></h4>
								<p>This is a snippet of the user comment. You can easily see if it's spam or real content.</p>
								<p class="gt-table-action-list"><a href=""><img src="images/famfamfam/icons/accept.png" alt="Approve" /> Approve</a> <span class="gt-separator">|</span> <a href=""><img src="images/famfamfam/icons/delete.png" alt="Spam" /> Mark as Spam</a></p>
							</td>
							<td>
								<!-- Categories Sub Table -->
								<table border="0" class="gt-table-categories">
									<tr>
										<th>Posted by:</th>
										<td>greenman17</td>
									</tr>
									<tr>
										<th>Date:</th>
										<td>2 Days Ago</td>
									</tr>
									<tr>
										<th>Status:</th>
										<td>Pending Approval</td>
									</tr>
								</table>
							</td>
						</tr>
						<tr>
							<td>
								<h4><a href="">Re: Rapid UI Solutions - I love it!</a></h4>
								<p>This is a snippet of the user comment. You can easily see if it's spam or real content.</p>
								<p class="gt-table-action-list"><a href=""><img src="images/famfamfam/icons/accept.png" alt="Approve" /> Approve</a> <span class="gt-separator">|</span> <a href=""><img src="images/famfamfam/icons/delete.png" alt="Spam" /> Mark as Spam</a></p>
							</td>
							<td>
								<!-- Categories Sub Table -->
								<table border="0" class="gt-table-categories">
									<tr>
										<th>Posted by:</th>
										<td>greenman17</td>
									</tr>
									<tr>
										<th>Date:</th>
										<td>2 Days Ago</td>
									</tr>
									<tr>
										<th>Status:</th>
										<td>Pending Approval</td>
									</tr>
								</table>
							</td>
						</tr>
						<tr>
							<td>
								<h4><a href="">Re: Rapid UI Solutions - I love it!</a></h4>
								<p>This is a snippet of the user comment. You can easily see if it's spam or real content.</p>
								<p class="gt-table-action-list"><a href=""><img src="images/famfamfam/icons/accept.png" alt="Approve" /> Approve</a> <span class="gt-separator">|</span> <a href=""><img src="images/famfamfam/icons/delete.png" alt="Spam" /> Mark as Spam</a></p>
							</td>
							<td>
								<!-- Categories Sub Table -->
								<table border="0" class="gt-table-categories">
									<tr>
										<th>Posted by:</th>
										<td>greenman17</td>
									</tr>
									<tr>
										<th>Date:</th>
										<td>2 Days Ago</td>
									</tr>
									<tr>
										<th>Status:</th>
										<td>Pending Approval</td>
									</tr>
								</table>
							</td>
						</tr>
						<tr>
							<td>
								<h4><a href="">Re: Rapid UI Solutions - I love it!</a></h4>
								<p>This is a snippet of the user comment. You can easily see if it's spam or real content.</p>
								<p class="gt-table-action-list"><a href=""><img src="images/famfamfam/icons/accept.png" alt="Approve" /> Approve</a> <span class="gt-separator">|</span> <a href=""><img src="images/famfamfam/icons/delete.png" alt="Spam" /> Mark as Spam</a></p>
							</td>
							<td>
								<!-- Categories Sub Table -->
								<table border="0" class="gt-table-categories">
									<tr>
										<th>Posted by:</th>
										<td>greenman17</td>
									</tr>
									<tr>
										<th>Date:</th>
										<td>2 Days Ago</td>
									</tr>
									<tr>
										<th>Status:</th>
										<td>Pending Approval</td>
									</tr>
								</table>
							</td>
						</tr>
					</tbody>
				</table>
				</div><!-- /content box -->
				
				<div class="gt-table-buttons">
					<a href="" class="gt-btn-blue-medium">View All</a>
				</div>
				<!-- / Comments -->
				
				
				<!-- Categories Table -->
				<!-- This table can be used for listing things like article categories -->
				<h2 class="gt-table-head">Current Categories</h2>
				<!-- content box -->
				<div class="gt-content-box">
				<table border="0" class="gt-table">
					<thead>
						<tr>
							<th class="gt-table-col-checkbox"><a href=""><img src="images/famfamfam/icons/tick.png" alt="check" /></a></th>
							<th>Categories</th>
							<th></th>
						</tr>
					</thead>
					
					<tbody>
						<tr>
							<td><input type="checkbox" /></td>
							<td><a href="">Blog</a></td>
							<td></td>
						</tr>
						<tr>
							<td><input type="checkbox" /></td>
							<td><a href="">About</a></td>
							<td></td>
						</tr>
						<tr>
							<td><input type="checkbox" /></td>
							<td><a href="">Contact</a></td>
							<td></td>
						</tr>
					</tbody>
				</table>
				
				<!-- Table Controls -->
				<div class="gt-table-controls gt-table-controls-btm clearfix">
					<p class="gt-table-pager"><a class="current" href="">1</a> | <a href="">2</a> | <a href="">3</a> <a href="">&raquo;</a></p>
				</div><!-- /Table Controls -->
				
				</div><!-- /content box -->
				<div class="gt-table-buttons">
					<a href="" class="gt-btn-blue-small gt-btn-left">New</a>
					<a href="" class="gt-btn-gray-medium gt-btn-right">Delete</a>
				</div>
				<!-- / Categories -->
				
				
				<!-- Files Table -->
				<!-- This table can be used for listing things like files, pictures, documents, etc -->
				<h2 class="gt-table-head">Files</h2>
				<!-- content box -->
				<div class="gt-content-box">
				<table border="0" class="gt-table">
					<thead>
						<tr>
							<th class="gt-table-col-checkbox"><a href=""><img src="images/famfamfam/icons/tick.png" alt="check" /></a></th>
							<th>File Name</th>
							<th>File Size</th>
						</tr>
					</thead>
					
					<tbody>
						<tr>
							<td><input type="checkbox" /></td>
							<td><a href="">blog-image.gif</a></td>
							<td>147KB</td>
						</tr>
						<tr>
							<td><input type="checkbox" /></td>
							<td><a href="">about-us-photos.jpg</a></td>
							<td>87KB</td>
						</tr>
						<tr>
							<td><input type="checkbox" /></td>
							<td><a href="">balloon-pic.jpg</a></td>
							<td>94KB</td>
						</tr>
					</tbody>
				</table>
				</div><!-- /content box -->
				<div class="gt-table-buttons">
					<a href="" class="gt-btn-blue-small gt-btn-left">Edit</a>
					<a href="" class="gt-btn-gray-small gt-btn-left">Delete</a>
					<a href="" class="gt-btn-blue-large gt-btn-right">Upload New Image</a>
				</div>
				<!-- / Files -->
				
			</div>
			<!-- / main content -->
			
			<!-- sidebar -->
			<div class="gt-sidebar">
				<!-- Sidebar Navigation -->
				<div class="gt-sidebar-nav gt-sidebar-nav-blue">
					<h3>Quick Links</h3>
					<ul>
						<li><a href="">Add a New Post</a></li>
						<li><a href="">Edit User Settings</a></li>
						<li><a href="">View Live Site</a></li>
					</ul>
				</div><!-- /Sidebar Navigation -->
				
				<!-- Sidebar Box -->
				<div class="gt-sidebar-box gt-sidebar-box-gray">
					<!-- search -->
					<div class="gt-search"><div class="gt-search-inner">
						<input type="text" class="gt-search-text" value="Find an Article" onfocus="javascript:if(this.value=='Find an Article')this.value='';" onblur="javascript:if(this.value=='')this.value='Find an Article';" />
					</div></div><!-- /search -->
				</div><!-- /Sidebar Box -->
				
				<!-- Sidebar Navigation -->
				<div class="gt-sidebar-nav gt-sidebar-nav-gray">
					<h3>Get Help</h3>
					<ul>
						<li><a href="mailto:help@gooeytemplates.com">Email Us</a></li>
					</ul>
				</div><!-- /Sidebar Navigation -->
				
				<!-- Sidebar Content -->
				<div class="gt-sidebar-content">
					<h3>Sidebar Note</h3>
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
				</div><!-- /Sidebar Content -->
				
				<!-- Sidebar List -->
				<div class="gt-sidebar-list">
					<h3>Users List</h3>
					<ul class="gt-sidebar-list-content">
						<li class="gt-sidebar-list-row">
							<img class="gt-avatar-small" src="images/gt/avatar-small.gif" alt="avatar-small" width="25" height="25"/>
							<h4><a href="">John Marker</a></h4>
							<p>I love to color pictures!</p>
						</li>
						
						<li class="gt-sidebar-list-row">
							<img class="gt-avatar-small" src="images/gt/avatar-small.gif" alt="avatar-small" width="25" height="25"/>
							<h4><a href="">Charlee Watts</a></h4>
							<p>Eco-friendly is the way to go!</p>
						</li>
						
						<li class="gt-sidebar-list-row">
							<img class="gt-avatar-small" src="images/gt/avatar-small.gif" alt="avatar-small" width="25" height="25"/>
							<h4><a href="">Sarah Smith</a></h4>
							<p>I love to draw...</p>
						</li>
					</ul>
				</div><!-- /Sidebar List -->
				
			</div>
			<!-- / sidebar -->
			
		</div>
		<!-- / body -->
		
		<!-- footer -->
		<div class="gt-footer"><div class="gt-footer-inner">
			<p>Copyright &copy; 2010 Gooey Templates - <a href="http://www.gooeytemplates.com" target="_blank">GooeyTemplates.com</a></p>
		</div></div>
		<!-- /footer -->
	</body>
</html>